@extends('mobile.layout')

    @section('style')
        @parent
        <link rel="stylesheet" type="text/css" href="{{ asset('static/mobile/less/index.css') }}?v={{ app('cache.config')->get('asset_version') }}"/>

        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .za{
                background: rgba(0,0,0,0.3);
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
            }
            .banner-video{
                position: relative;
            }
            .banner-video video{
                display: block;
            }
            .video-logo{
                width: 6.5rem;
                position: absolute;
                z-index: 1;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .video-logo img{
                width: 100%;
            }

        </style>

    @stop

    @section('script')
        @parent
        <script>
            var stochastic = '{{ app('cache.config')->get('cate1_images') }}';
            if(stochastic){
                stochastic = stochastic.split(',');
                var is_stochasticRun = 0;
                stochastic.sort(function() {
                    return 0.5 - Math.random()
                })
                setInterval(function(){
                    stochasticRun(1)
                },2000)
            }

            function stochasticRun(num) {

                if(!is_stochasticRun){
                    var temp = '';
                    for(var i=0;i<num;i++){

                        var element = stochastic.pop();
                        temp += '<div class="co"><img src="/uploads/'+element+'" alt=""></div>';
                        stochastic.unshift(element);
                    }
                    $('.stochastic').html(temp)
                    is_stochasticRun = 1;
                }else{
                    var img_src = stochastic.pop();
                    $('.stochastic .co').eq(Math.floor(Math.random()*num)).find('img').attr('src','/uploads/'+img_src)
                    stochastic.unshift(img_src);

                }

            }
        </script>

        <script>
            var mySwiper = new Swiper('#testimonial-swiper', {
                centeredSlides: true,
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 20,
                speed: 1000,
                slideToClickedSlide:true,
                loop:true,
                pagination: {
                    el: '#testimonial-pagination',
                    clickable :true,
                },
                breakpoints: {
                    768: {
                        slidesPerView: 1,
                        slidesPerGroup: 1,
                        spaceBetween: 20,

                    },
                    1280: {
                        slidesPerView: 5,
                        slidesPerGroup: 3,
                        spaceBetween: 30
                    },
                    2560: {
                        slidesPerView: 5,
                        slidesPerGroup: 3
                    }
                },

            })

        </script>
        <script>
            var newsSwiper = new Swiper('.news-slide', {
                autoplay: {
                    delay: 2000,
                    disableOnInteraction:false,
                },
                effect: 'fade',
                allowTouchMove: false,
                resizeObserver: true,
                autoHeight:true,
                on: {
                    init: function(swiper){

                        $('.progressbar .bar').eq(this.activeIndex).addClass('active').siblings().removeClass('active')

                    },
                    slideChange: function(){
                        $('.progressbar .bar').eq(this.activeIndex).addClass('active').siblings().removeClass('active')
                    },
                },
            })
            $('.progressbar .bar').click(function(){

                newsSwiper.slideTo($(this).index(),1000,false);
            });
        </script>

    @stop

@section('breadcrumb')@stop
@section('banner')
    <div class="banner-video">
        <video poster="{{ asset('static/video/m_poster.jpg') }}" autoplay="" loop="" muted="" width="100%" playsinline="">
            <source src="{{ asset('static/video/m_video_2.mp4') }}" type="video/mp4">
        </video>

    </div>
@stop
@section('content')
    <section class="classify-section">
        <a class="group" href="{{ url('product') }}" data-observer="選購 抛棄式">
            <img src="{{ asset('static/img/mpaoqi.png') }}" alt="ILIA抛棄式購買">
            <p class="text">選購 抛棄式 <i class="iconfont">&#xe6e0;</i></p>
        </a>
        <a class="group" href="{{ url('pods') }}" data-observer="選購 煙彈">
            <img src="{{ asset('static/img/myandan.png') }}" alt="ILIA煙彈購買">
            <p class="text">選購 煙彈 <i class="iconfont">&#xe6e0;</i></p>
        </a>
        <a class="group" href="{{ url('host') }}" data-observer="選購 主機">
            <img src="{{ asset('static/img/mzhuji.png') }}" alt="ILI主機購買">
            <p class="text">選購 主機 <i class="iconfont">&#xe6e0;</i></p>
        </a>
    </section>
    <section class="product-section">
        <div class="only disposable">
            <div class="expendbg">
                <div class="expand wrapper">
                    <div class="divide">
                        <div class="photo">
                            <div class="stochastic">

                            </div>
                        </div>
                        <div class="nature">
                            <h2 class="title">{!! app('cache.config')->get('cate1_title') !!}</h2>
                            <a href="{{ url('product') }}" class="go-buy" data-observer="點擊選購-{{ app('cache.config')->get('cate1_title') }}"><i class="iconfont">&#xe652;</i>點擊選購</a>
                        </div>
                    </div>

                    <div class="about">
                        <p class="desc">{!! app('cache.config')->get('cate1_desc') !!}</p>
                        <div class="ensure">
                            <div class="group">
                                <p class="cols">
                                    <i class="iconfont">&#xe67e;</i>
                                    <span class="text">27種口味</span>
                                </p>
                                <p class="cols">
                                    <i class="iconfont">&#xe7a4;</i>
                                    <span class="text">續航持久</span>
                                </p>
                                <p class="cols">
                                    <i class="iconfont">&#xe683;</i>
                                    <span class="text">智慧電芯</span>
                                </p>

                            </div>
                            <div class="group">
                                <p class="cols">
                                    <i class="iconfont">&#xe655;</i>
                                    <span class="text">多重循環</span>
                                </p>
                                <p class="cols">
                                    <i class="iconfont">&#xe8c0;</i>
                                    <span class="text">滿5k减350</span>
                                </p>
                                <p class="cols">
                                    <i class="iconfont">&#xe658;</i>
                                    <span class="text">滿3k免運</span>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="product">
                @foreach($product as $goods)
                    <div class="goods">
                        <a href="{{ url('product/'.$goods->id)  }}">
                            <img src="{{ asset_upload($goods->img) }}" alt="{{ $goods->flavor }}">
                            <p class="name">{{ $goods->flavor }}</p>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="only pods">
            <div class="expendbg">
                <div class="expand wrapper">

                    <div class="divide">
                        <div class="photo">
                            <div class="revolve">
                                <img src="{{ asset_upload(app('cache.config')->get('cate2_image_revolve')) }}" alt="{!! app('cache.config')->get('cate2_title') !!}">
                            </div>
                            <div class="random cigarette" id="cigarette">
                                <div class="co"><img src="{{ asset_upload(app('cache.config')->get('cate2_image_random')) }}" alt="{!! app('cache.config')->get('cate2_title') !!}"></div>
                            </div>
                        </div>
                        <div class="nature">
                            <h2 class="title">{!! app('cache.config')->get('cate2_title') !!}</h2>
                            <a href="{{ url('pods') }}" class="go-buy" data-observer="點擊選購-{{ app('cache.config')->get('cate2_title') }}"><i class="iconfont">&#xe652;</i>點擊選購</a>
                        </div>
                    </div>

                    <div class="about">
                        <p class="desc">{!! app('cache.config')->get('cate2_desc') !!}</p>
                        <div class="ensure">
                            <div class="group">
                                <p class="cols">
                                    <i class="iconfont">&#xe67e;</i>
                                    <span class="text">26種口味</span>
                                </p>
                                <p class="cols">
                                    <i class="iconfont">&#xe672;</i>
                                    <span class="text">食品原料</span>
                                </p>
                                <p class="cols">
                                    <i class="iconfont">&#xe8c6;</i>
                                    <span class="text">蜂窩霧化</span>
                                </p>

                            </div>
                            <div class="group">
                                <p class="cols">
                                    <i class="iconfont">&#xe7cd;</i>
                                    <span class="text">五重防漏</span>
                                </p>
                                <p class="cols">
                                    <i class="iconfont">&#xe8c0;</i>
                                    <span class="text">滿5k减350</span>
                                </p>
                                <p class="cols">
                                    <i class="iconfont">&#xe658;</i>
                                    <span class="text">滿3k免運</span>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="product">
                @foreach($pods as $goods)
                    <div class="goods">
                        <a href="{{ url('pods/'.$goods->id)  }}">
                            <img src="{{ asset_upload($goods->img) }}" alt="{{ $goods->flavor }}">
                            <p class="name">{{ $goods->flavor }}</p>
                        </a>
                    </div>

                @endforeach

            </div>
        </div>
        <div class="only host">
            <div class="expendbg">
                <div class="expand wrapper">
                    <div class="divide">
                        <div class="photo">
                            <img class="base" src="{{ asset_upload(app('cache.config')->get('cate3_image_base')) }}" alt="{!! app('cache.config')->get('cate3_title') !!}">
                            <img class="float left" src="{{ asset_upload(app('cache.config')->get('cate3_image_left')) }}" alt="ILIA主機">
                            <img class="float right" src="{{ asset_upload(app('cache.config')->get('cate3_image_right')) }}" alt="ILIA主機">
                        </div>
                        <div class="nature">
                            <h2 class="title">{!! app('cache.config')->get('cate3_title') !!}</h2>
                            <a href="{{ url('host') }}" class="go-buy" data-observer="點擊選購-{{ app('cache.config')->get('cate3_title') }}"><i class="iconfont">&#xe652;</i>點擊選購</a>
                        </div>
                    </div>
                    <div class="about">

                        <p class="desc">{!! app('cache.config')->get('cate3_desc') !!}</p>
                        <div class="ensure">
                            <div class="group">
                                <p class="cols">
                                    <i class="iconfont">&#xe657;</i>
                                    <span class="text">極速霧化</span>
                                </p>
                                <p class="cols">
                                    <i class="iconfont">&#xe656;</i>
                                    <span class="text">IP56防水</span>
                                </p>
                                <p class="cols">
                                    <i class="iconfont">&#xe7a4;</i>
                                    <span class="text">續航持久</span>
                                </p>

                            </div>
                            <div class="group">
                                <p class="cols">
                                    <i class="iconfont">&#xe683;</i>
                                    <span class="text">智慧電芯</span>
                                </p>
                                <p class="cols">
                                    <i class="iconfont">&#xe8c0;</i>
                                    <span class="text">滿5k减350</span>
                                </p>
                                <p class="cols">
                                    <i class="iconfont">&#xe658;</i>
                                    <span class="text">滿3k免運</span>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="product">
                @foreach($host as $goods)
                    <div class="goods">
                        <a href="{{ url('host/'.$goods->id)  }}">
                            <img src="{{ asset_upload($goods->img) }}" alt="{{ $goods->flavor }}">
                            <p class="name">{{ $goods->flavor }}</p>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="testimonial">
        <h2 class="title">精选留言</h2>
        <div class="words">
            <div class="swiper-container" id="testimonial-swiper">
                <div class="swiper-wrapper">

                    @php
                        $home_comments = [];
                        try {
                            $home_comments = json_decode(app('cache.config')->get('home_comments'),true);
                         }catch (\Exception $exception){

                         }

                    @endphp
                    @foreach($home_comments as $item)
                        <div class="swiper-slide">
                            <div class="review-block">
                                <div class="exponent">
                                    <span class="s1">推薦度</span>
                                    <p class="star">
                                        @php
                                            $star = array_get($item,'star');
                                        @endphp
                                        @for($i=0;$i<5;$i++)
                                            @if(($star-$i)>1)
                                                <i class="iconfont">&#xe9a1;</i>
                                            @elseif(($star-$i) == 0.5)
                                                <i class="iconfont">&#xe9a3;</i>
                                            @else
                                                <i class="iconfont">&#xe9a2;</i>
                                            @endif
                                        @endfor
                                    </p>
                                </div>
                                <p class="desc">{{ array_get($item,'content') }}</p>
                                <p class="flavour">
                                    <a href="{{ array_get($item,'href')  }}">{{ array_get($item,'taste') }}</a>
                                </p>
                            </div>
                        </div>
                    @endforeach


                </div>
            </div>
            <div class="swiper-pagination" id="testimonial-pagination"></div>
        </div>
    </section>

    <section class="essay">
        <div class="wrap">
            <div class="about-wrap">
                {!!  app('cache.config')->get('home_text_desc') !!}
            </div>
            <div class="news-wrap">
                <div class="article">
                    <div class="swiper-container news-slide">
                        <div class="swiper-wrapper ">
                            @foreach($news as $item)
                                <div class="swiper-slide">
                                    <div class="item">
                                        <a href="{{ url('news/'.$item->id) }}">
                                            <img src="{{ asset('uploads/'.$item->img) }}" alt="{{ $item->seo_title?:$item->title }}">
                                            <div class="content">
                                                <h3 class="title">{{ $item->title }}</h3>
                                                <p class="desc">{{ \Illuminate\Support\Str::limit($item->brief?$item->brief:strip_tags($item->content),123) }}</p>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="progressbar">
                    @foreach($news as $item)
                        <div class="bar" style="background-image: url('{{ asset('uploads/'.$item->img) }}')"></div>
                    @endforeach
                </div>

            </div>
        </div>
    </section>
@endsection
